<template>
  <page-header-wrapper>
    <a-card>
      <div class="table-page-search-wrapper">
        <a-form layout="inline" class="table-head-ground">
          <div class="table-layer">
            <jeepay-text-up
              :placeholder="'结汇Id'"
              :msg="searchData.drawId"
              v-model:value="searchData.drawId"
            />
            <a-form-item label="" class="table-head-layout">
              <a-select
                v-model:value="searchData.state"
                placeholder="结汇状态"
                default-value=""
              >
                <a-select-option value="">全部</a-select-option>
                <a-select-option value="0">待处理</a-select-option>
                <a-select-option value="1">未通过</a-select-option>
                <a-select-option value="2">待打款</a-select-option>
                <a-select-option value="3">已打款</a-select-option>
                <a-select-option value="4">打款失败</a-select-option>
              </a-select>
            </a-form-item>
            <span
              class="table-page-search-submitButtons"
              style="flex-grow: 0; flex-shrink: 0"
            >
              <a-button
                type="primary"
                icon="search"
                @click="queryFunc"
                :loading="btnLoading"
              >查询</a-button
              >
              <a-button
                style="margin-left: 8px"
                icon="reload"
                @click="() => (this.searchData = {})"
              >重置</a-button
              >
            </span>
          </div>
        </a-form>
        <div>
          <a-button
            v-if="$access('ENT_MCH_DRAW_ADD')"
            type="primary"
            icon="plus"
            @click="addFunc"
            class="mg-b-30"
          >新建</a-button
          >
        </div>
      </div>

      <!-- 列表渲染 -->
      <JeepayTable
        @btnLoadClose="btnLoading = false"
        ref="infoTable"
        :initData="true"
        :reqTableDataFunc="reqTableDataFunc"
        :tableColumns="tableColumns"
        :searchData="searchData"
        rowKey="drawId"
      >
        <template v-slot:drawIdSlot="{ record }">
          <a href="javascript:void(0);" @click="openDetail(record)">{{
            record
          }}</a>
        </template>
        <template v-slot:drawAmountSlot="{ record }">
          {{ record ? record.toFixed(2) : '' }}
        </template>
        <template v-slot:mchFeeAmountSlot="{ record }">
          {{ record.toFixed(2) }}
        </template>
        <template v-slot:drawAmountToSlot="{ record }">
          {{ record ? record.toFixed(2) : '' }}
        </template>
        <template v-slot:amountSlot="{ record }">
          {{ record ? record.toFixed(2) : '' }}
        </template>
        <template v-slot:exchangeRateSlot="{ record }">
          {{ `${record ? '1:' + record.toFixed(2) : ''}` }}
        </template>
        <template v-slot:stateSlot="{ record }">
          <a-tag
            :key="record"
            :color="record < stateColor.length ? stateColor[record] : 'volcano'"
          >
            {{ record < stateText.length ? stateText[record] : '未知' }}
          </a-tag>
        </template>
      </JeepayTable>
    </a-card>
    <!-- 新增应用  -->
    <!-- <MchAppAddOrEdit ref="mchAppAddOrEdit" :callbackFunc="searchFunc"/> -->
    <!-- 支付参数配置页面组件  -->
    <!-- <MchPayIfConfigList ref="mchPayIfConfigList" /> -->
    <!-- 日志详情抽屉 -->
    <template>
      <a-drawer
        width="50%"
        placement="right"
        :closable="true"
        :visible="visible"
        :title="visible === true ? '提汇详情' : ''"
        @close="onClose"
      >
        <a-form-model ref="FROM" :model="detailData" :rules="rules">
          <a-form-model-item label="结汇ID" prop="drawId">
            {{ detailData.drawId }}
          </a-form-model-item>
          <a-form-model-item label="货币代码">
            <a-input
              :value="detailData.currency"
              :disabled="true"
              size="large"
            ></a-input>
          </a-form-model-item>
          <a-form-model-item label="单位">
            {{ detailData.currency }}
          </a-form-model-item>
          <a-form-model-item label="提汇金额" prop="drawAmount">
            <a-input :value="detailData.drawAmount" :disabled="true"></a-input>
          </a-form-model-item>
          <a-form-model-item label="手续费">
            {{ detailData.mchFeeAmount }}
          </a-form-model-item>
          <a-form-model-item label="提汇实扣">
            {{ detailData.drawAmountTo }}
          </a-form-model-item>
          <a-form-model-item label="收款方式" prop="entryType">
            <a-input :value="detailData.entryType" :disabled="true"></a-input>
          </a-form-model-item>
          <a-form-model-item label="收款账号" prop="accountNo">
            <a-input :value="detailData.accountNo" :disabled="true"></a-input>
          </a-form-model-item>
          <a-form-model-item label="提汇备注" prop="drawDesc">
            <a-textarea :value="detailData.drawDesc" :disabled="true" />
          </a-form-model-item>
          <a-form-model-item label="打款汇率" prop="exchangeRate">
            {{ detailData.exchangeRate ? `1:${detailData.exchangeRate}` : '' }}
          </a-form-model-item>
          <a-form-model-item label="打款数额" prop="amount">
            {{ detailData.amount }}
          </a-form-model-item>
          <a-form-model-item label="备注" prop="auditDesc">
            <a-textarea :value="detailData.auditDesc" :disabled="true" />
          </a-form-model-item>
        </a-form-model>
        <a-divider />
        <div class="drawer-btn-center">
          <a-button @click="onClose" icon="close"> 关闭 </a-button>
        </div>
      </a-drawer>
    </template>
    <AddDraw
      ref="AddDraw"
      v-model:addDate="addDate"
      :callbackFunc="searchFunc"
    />
  </page-header-wrapper>
</template>

<script>
import JeepayTable from '@/components/JeepayTable/JeepayTable'
import JeepayTextUp from '@/components/JeepayTextUp/JeepayTextUp' // 文字上移组件
import JeepayTableColumns from '@/components/JeepayTable/JeepayTableColumns'
import { API_URL_MCH, req, NEW_INFO } from '@/api/manage'
import AddDraw from './addDraw'
// import MchPayIfConfigList from './MchPayIfConfigList'

// eslint-disable-next-line no-unused-vars
const tableColumns = [
  {
    key: 'drawId',
    dataIndex: 'drawId',
    width: '160px',
    title: '结汇Id',
    scopedSlots: { customRender: 'drawIdSlot' }
  },
  { key: 'currency', title: '币种', dataIndex: 'currency', width: '60px' },
  {
    key: 'drawAmount',
    title: '结汇金额',
    dataIndex: 'drawAmount',
    width: '100px',
    scopedSlots: { customRender: 'drawAmountSlot' }
  },
  {
    key: 'mchFeeAmount',
    title: '结汇手续费',
    dataIndex: 'mchFeeAmount',
    width: '100px',
    scopedSlots: { customRender: 'mchFeeAmountSlot' }
  },
  {
    key: 'drawAmountTo',
    title: '结汇总金额',
    dataIndex: 'drawAmountTo',
    width: '100px',
    scopedSlots: { customRender: 'drawAmountToSlot' }
  },
  {
    key: 'entryType',
    title: '收款方式',
    dataIndex: 'entryType',
    width: '140px'
  },
  {
    key: 'accountNo',
    title: '收款账号',
    width: '140px',
    dataIndex: 'accountNo'
  },
  {
    key: 'amount',
    title: '打款数额',
    width: '100px',
    dataIndex: 'amount',
    scopedSlots: { customRender: 'amountSlot' }
  },
  {
    key: 'exchangeRate',
    title: '打款汇率',
    dataIndex: 'exchangeRate',
    width: '100px',
    scopedSlots: { customRender: 'exchangeRateSlot' }
  },
  {
    key: 'state',
    title: '状态',
    dataIndex: 'state',
    width: '100px',
    scopedSlots: { customRender: 'stateSlot' }
  },
  {
    key: 'createdAt',
    dataIndex: 'createdAt',
    width: '180px',
    title: '创建日期'
  }
]

export default {
  name: 'MchAppPage',
  components: { JeepayTable, JeepayTableColumns, JeepayTextUp, AddDraw },
  data () {
    return {
      btnLoading: false,
      tableColumns: tableColumns,
      stateColor: ['blue', 'cyan', 'orange', 'green', 'red'],
      stateText: ['待处理', '未通过', '待打款', '已打款', '打款失败'],
      searchData: {},
      detailData: {},
      visible: false,
      rules: {
        entryType: [{ required: true, trigger: 'blur' }],
        drawAmount: [{ required: true, trigger: 'blur' }],
        accountNo: [{ required: true, trigger: 'blur' }]
      },
      addDate: {},
      addVisible: false
    }
  },
  methods: {
    queryFunc () {
      this.btnLoading = true
      this.$refs.infoTable.refTable(true)
    },
    // 请求table接口数据
    reqTableDataFunc: (params) => {
      return req.list(API_URL_MCH, params)
    },
    searchFunc: function () {
      // 点击【查询】按钮点击事件
      this.$refs.infoTable.refTable(true)
    },
    addFunc: function () {
      // 业务通用【新增】 函数
      this.$refs.AddDraw.show()
      req.list(NEW_INFO).then((res) => {
        console.log(res, 'res')
        this.addDate = res
        console.log(this.addDate, 'this.addDate')
      })
    },
    openDetail: function (drawId) {
      const that = this
      req.getById(API_URL_MCH, drawId).then((res) => {
        that.detailData = res
        console.log(res, 'res')
      })
      this.visible = true
    },
    onClose: function () {
      this.visible = false
      this.detailData = {}
    }
  }
}
</script>

<style>
.ant-form-item {
  display: flex;
}
.ant-form-item-label {
  width: 130px;
}
.ant-form-item-control-wrapper {
  flex: 2;
}
</style>
